<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>threejs-rotating-cube</title>
    <style>
        body{
            font-family: Monospace;
            background: #000;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="../js/three.js"></script>
<script type="text/javascript" src="../js/OrbitControls.js"></script>
<!-- <script src="../js/TrackballControls.js"></script> -->
<script type="text/javascript">
    var container;
    var controls;
    var scene, camera, renderer, plane;
    var cubeMesh;
    var cubeMeshLeft;
    var cubeMeshRight;
    main();
 
    function main(){
        //添加一个div元素
        container = document.createElement('div');
        document.body.appendChild(container);
        scene = new THREE.Scene();//创建新场景
        createCamera();
        createPlane();
        createLight();
        createRenderer();
        createCube();
        // cube2();
        // createLinder();
        render();
        controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象 用来鼠标控制
    }
 
    // 创建立方体
    function createCube(){
        cube();
        cubeLeft();
        cubeRight();
    }

    // 创建棱柱 
    function createLinder(){
        // CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
        // radiusTop — 圆柱的顶部半径，默认值是1。
        // radiusBottom — 圆柱的底部半径，默认值是1。
        // height — 圆柱的高度，默认值是1。
        // radialSegments — 圆柱侧面周围的分段数，默认为8。
        // heightSegments — 圆柱侧面沿着其高度的分段数，默认值为1。
        // openEnded — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。
        // thetaStart — 第一个分段的起始角度，默认为0。（three o'clock position）
        // thetaLength — 圆柱底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆柱。
        var geometry = new THREE.CylinderGeometry( 5, 25, 150, 4 );
        var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
        var cylinder = new THREE.Mesh( geometry, material );
        scene.add( cylinder );
    }
    function cube2(){
        var cubeGeo =  new THREE.BoxGeometry( 60, 60, 60 );//创建立方体
        var cubeMat = new THREE.MeshLambertMaterial({//创建材料
            color:0x4ff4f,
            wireframe:false  // wireframe是否使用线条
        });
        cubeMesh = new THREE.Mesh(cubeGeo, cubeMat);//创建立方体网格模型
        cubeMesh.position.set(0, 0, 0);//设置立方体的坐标
        cubeMesh.castShadow = true;
        scene.add(cubeMesh);//将立方体添加到场景中
    }
    //创建一个立方体(中心点在 width/2 height/2 depth/2 正中心)
    function cube(){
        // BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)
        // width — X轴上面的宽度，默认值为1。
        // height — Y轴上面的高度，默认值为1。
        // depth — Z轴上面的深度，默认值为1。
        // widthSegments — （可选）宽度的分段数，默认值是1。
        // heightSegments — （可选）宽度的分段数，默认值是1。
        // depthSegments — （可选）宽度的分段数，默认值是1。
        var cubeGeo =  new THREE.BoxGeometry( 200, 50, 50 );//创建立方体
        var cubeMat = new THREE.MeshLambertMaterial({//创建材料
            color:0xFF6600,
            wireframe:false  // wireframe是否使用线条
        });
        cubeMesh = new THREE.Mesh(cubeGeo, cubeMat);//创建立方体网格模型
        cubeMesh.position.set(0, 25, 0);//设置立方体的坐标（y轴高度为50 所以设置25的位置使之上移到平面上）
        cubeMesh.castShadow = true;
        scene.add(cubeMesh);//将立方体添加到场景中
    }

    function cubeLeft(){
        var cubeGeo =  new THREE.BoxGeometry( 50, 50, 100 );//创建立方体
        var cubeMat = new THREE.MeshLambertMaterial({//创建材料
            color:0xFF6600,
            wireframe:false
        });
        cubeMeshLeft = new THREE.Mesh(cubeGeo, cubeMat);//创建立方体网格模型
        cubeMeshLeft.position.set(-125, 25, 25);//设置立方体的坐标
        cubeMeshLeft.castShadow = true;
        scene.add(cubeMeshLeft);//将立方体添加到场景中
    }

    function cubeRight(){
        var cubeGeo =  new THREE.BoxGeometry( 50, 50, 100 );//创建立方体
        var cubeMat = new THREE.MeshLambertMaterial({//创建材料
            color:0xFF6600,
            wireframe:false
        });
        cubeMeshRight = new THREE.Mesh(cubeGeo, cubeMat);//创建立方体网格模型
        cubeMeshRight.position.set(125, 25, 25);//设置立方体的坐标
        cubeMeshRight.castShadow = true;
        scene.add(cubeMeshRight);//将立方体添加到场景中
    }
 
    // 渲染
    function render(){
        //让立方体动起来
        // cubeMesh.rotation.x += 0.02;
        // cubeMesh.rotation.y += 0.02;
        // cubeMesh.rotation.z += 0.02;
        // cubeMeshLeft.rotation.x += 0.02;
        // cubeMeshLeft.rotation.y += 0.02;
        // cubeMeshLeft.rotation.z += 0.02;
        // controls.update()
        renderer.render(scene, camera);
        requestAnimationFrame(render);
 
    }

    // 创建相机
    function createCamera(){
        //添加一个透视相机
        camera = new THREE.PerspectiveCamera(30,
            window.innerWidth/window.innerHeight, 1, 1000);
        camera.position.set(0, 100, 400);//设置相机位置
        camera.lookAt(new THREE.Vector3(0,0,0));//让相机指向原点
    }
    // 创建光源
    function createLight(){
        //自然光
        var ambientLight = new THREE.AmbientLight( 0x606060 );
        scene.add( ambientLight );

        //平行光源
        var directionalLight = new THREE.DirectionalLight( 0xffffff );
        directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
        directionalLight.castShadow = true;
        scene.add( directionalLight );
    }
    // 创建平面
    function createPlane(){
        plane = new THREE.Mesh(new THREE.PlaneGeometry(500, 500, 500, 500),
        new THREE.MeshLambertMaterial({color: 0xcccccc}));
        plane.rotation.x = -Math.PI / 2;
        plane.position.y = -1;
        plane.receiveShadow = true;
        scene.add(plane);
    }
    // 创建渲染器
    function createRenderer(){
        //渲染
        renderer = new THREE.WebGLRenderer({antialias:true});  //antialias:true增加抗锯齿效果
        renderer.setClearColor(new THREE.Color(0x000000)); //设置窗口背景颜色为黑  0xffffff为白色
        renderer.setSize(window.innerWidth, window.innerHeight); //设置窗口尺寸
        renderer.shadowMapEnabled = true; // 设置可展示阴影
        container.appendChild(renderer.domElement); //将renderer关联到container，这个过程类似于获取canvas元素
    }
</script>
</body>
</html>